@import (reference) './_vars.less';
@import (reference) './_mixin.less';

.page-nav {
    padding: 20px 0;
    text-align: center;
    line-height: 1;

    .page-number, .extend {
        display: inline-block;
        margin: 0 6px;
        padding: 4px 10px;
        color: @color-primary;
        color: var(--color-primary);
        border: 1px solid @color-border;
        border: 1px solid var(--color-border);
        .transition(all 0.3s ease);
    }
    .current, .page-number:hover, .extend:hover {
        color: @color-bg;
        color: var(--color-bg);
        background-color: @color-primary;
        background-color: var(--color-primary);
    }
    .space {
        margin: 0 4px;
    }
}
